<template>
  <div>
    <!-- 地图 -->
    <div style="display:flex; margin:40px auto">
      <div id="mapWrapper" v-loading="loading"></div>
      <div class="locationWrapper">
        <el-tabs v-model="activeName" @tab-click="changeMarkers">
          <el-tab-pane label="风景" name="first">
            <ul>
              <li v-for="(item,index) in pois" :key="index" @mouseover="showPoi(item.id)">
                {{item.name}}
                <span>{{(Math.round(item.distance/10)/100).toFixed(2)}}公里</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="交通" name="second">
            <ul>
              <li v-for="(item,index) in pois" :key="index" @mouseover="showPoi(item.id)">
                {{item.name}}
                <span>{{(Math.round(item.distance/10)/100).toFixed(2)}}公里</span>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      userLocation: "",
      pois: [],
      map: {},
      markers: [],
      activeName: "first",
      resdata: []
    };
  },
  async mounted() {
    await this.loadUserLocation(); //创建定位

    // await等待的是promise,所以必须把axios执行后return出来
    await this.loadPoiList(); // 周边搜索
    // 这里要注意先搜索周边在渲染地图,不然地图创建出来之后无法再渲染出点标记
    this.creatMap(); //创建地图
    this.loading = false;
  },
  methods: {
    // 创建地图
    creatMap() {
      this.map = new AMap.Map("mapWrapper", {
        zoom: 15
      });
      // console.log(this.pois);
      this.setMarkers();
    },
    // 创建定位
    loadUserLocation() {
      const id = this.$route.params.id;
      return this.$axios({
        url: "hotels?id=" + id
        /* params: {
          key: "d4fe949f46c376f24a97aba4add1ccd7",
        }, */
      }).then(res => {
        console.log(res.data.data);
        this.resdata = res.data.data;
        console.log(this.resdata[0].location.latitude);
        this.userLocation = res.data.city;
      });
    },
    // 周边搜索
    loadPoiList(types) {
      console.log(this.resdata[0], 1231123);
      if (this.resdata[0]) {
        return this.$axios({
          url: "https://restapi.amap.com/v3/place/around",
          params: {
            key: "61924875e77a856007797dfeeed32c09",
            // location: "123,152",
            location: `${this.resdata[0].location.latitude.toFixed(
              6
            )},${this.resdata[0].location.longitude.toFixed(6)}`,
            types: types || "风景"
          }
        }).then(res => {
          console.log(res.data);
          this.pois = res.data.pois;
          console.log(this.pois);
        });
      }
    },
    // 添加点标记
    setMarkers() {
      this.markers = this.pois.map((poi, index) => {
        // console.log(poi);
        var marker = new AMap.Marker({
          title: poi.name,
          position: poi.location.split(","),
          content: `
          <div class="content-marker"> 
            <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"> 
            <div class="marker-index">${index + 1}</div>
          </div>
          `,
          extData: poi.id
        });
        // 设置每个点标记鼠标 Hover 事件
        marker.on("mouseover", () => {
          return this.showPoi(poi.id);
        });
        return marker;
      });

      // 使用通用函数,将整个地图的覆盖物清理掉
      this.map.clearMap();

      this.map.add(this.markers);

      // 添加完点标记, 将地图的视图设为合适的大小
      this.map.setFitView();
    },
    showPoi(poiId) {
      this.markers.forEach(marker => {
        // 判断标记的额外信息是否等于传进来的poiId
        if (marker.getExtData() == poiId) {
          // 置顶匹配点
          marker.setTop(true);
          //显示一个提示窗
          const infoWindow = new AMap.InfoWindow({
            content: `
              <span style="font-size: 12px;color: #333">${marker.getTitle()}</span>
            `,
            offset: new AMap.Pixel(0, -32)
          });
          infoWindow.open(this.map, marker.getPosition());
          // 点标记居中
          this.map.setCenter(marker.getPosition());
        }
      });
    },

    async changeMarkers(tab) {
      // console.log(tab.label);
      await this.loadPoiList(tab.label);
      // console.log(this);
      // 要等待地点列表获取完毕
      this.setMarkers();
    }
  }
};
</script> 

<style lang="less" scoped>
#mapWrapper {
  width: 650px;
  height: 360px;
}
.locationWrapper {
  padding-left: 20px;
  width: 350px;
  height: 360px;
  overflow: hidden;
  el-tab-pane {
    float: left;
    width: 149px;
    height: 25px;
    text-align: center;
    margin-bottom: 10px;
  }
  ul {
    width: 340px;
    height: 306px;
    overflow: auto;
    font-size: 14px;
    color: #666;
    li {
      line-height: 2;
      cursor: pointer;
    }
    span {
      float: right;
    }
  }
}
/deep/ .content-marker {
  position: relative;
  white-space: normal;
  width: 32px;
  height: 40px;
  top: -47px;
  right: 5px;
  img {
    white-space: normal;
    width: 100%;
    height: 100%;
  }
  .marker-index {
    position: absolute;
    top: 1px;
    right: 6px;
    width: 20px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    text-align: center;
    color: #fff;
  }
}
</style>